<template>
  <px-dialog v-model="visible" title="上传合格证" width="600px" destroy-on-close append-to-body @close="cancel">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-width="80px">
      <px-form-item label="合格证" prop="attachmentList">
        <DialogFileUpload
          v-if="visible"
          :fileData="{ moduleName: moduleName }"
          fileTitle="报告"
          @changeFileList="changeFileList"
          @saveFileStatus="saveFileStatus"
        />
      </px-form-item>
      <px-form-item label="备注" prop="remark">
        <px-input
          v-model="formValue.remark"
          maxlength="1000"
          clearable
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          placeholder="请输入备注信息"
        />
      </px-form-item>
    </px-form>
    <template #footer>
      <div class="dialog-footer">
        <px-button @click="cancel">取 消</px-button>
        <px-button :disabled="fileStatusFlag" type="primary" @click="submitForm(formRef)">确 定</px-button>
      </div>
    </template>
  </px-dialog>
</template>
<script lang="ts" setup>
import { getModuleName, uploadOrderFile } from "@/api/erc/epm";
import DialogFileUpload from "@/components/Upload/DialogFileUpload.vue";
import { PxMessage } from "px-ui";
import { computed, reactive, ref, toRefs, watchEffect } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable"]);
// 父级传过来的值
const props = defineProps(["visible", "code"]);

const visible = computed(() => props.visible);

// 表单校验规则
const rules = computed(() => ({
  attachmentList: [{ required: true, message: "合格证不能为空", trigger: "change" }]
}));

const formRef = ref();

const state = reactive<Record<string, any>>({
  formValue: {},
  fileStatusFlag: false,
  moduleName: ""
});
const { formValue, fileStatusFlag, moduleName } = toRefs(state);

// 新的报告列表
const changeFileList = val => {
  formValue.value.attachmentList = val;
  formRef?.value.clearValidate("attachmentList");
};
// 文件是否上传完，是否可以保存
const saveFileStatus = val => {
  fileStatusFlag.value = val;
};

// 获取getModuleName
const getModuleNameValue = async () => {
  moduleName.value = await getModuleName();
};

watchEffect(() => {
  if (props.visible) {
    getModuleNameValue();
  }
});

/** 取消按钮 */
const cancel = () => {
  formRef.value.resetFields();
  emits("closeDialog");
};
/** 提交按钮 */
const submitForm = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const attachmentList = [];
      if (formValue.value.attachmentList && formValue.value.attachmentList.length > 0) {
        formValue.value.attachmentList.forEach(item => {
          if (item?.id) {
            attachmentList.push(item.id);
          } else if (item?.response.data.id) {
            attachmentList.push(item.response.data.id);
          }
        });
      }
      await uploadOrderFile({ code: props.code, ...formValue.value, attachmentList });
      PxMessage.success("合格证上传成功");
      cancel();
      emits("queryTable");
    }
  });
};
</script>
